<template>
	<view class="">
		<view class="position-fixed top-0 wid100 z0" :style="{
			paddingTop:statusBarHeight+'px',
			height:'44px',
			backgroundColor:'#fdf1df'
		}"></view>
		<u-navbar placeholder bgColor="#fdf1df" showTitle='false' titleStyle="color:#fff">
			<view slot="left" class="u-nav-slot flex">
				<image src="../../static/index/top-logo.png" style="width: 260rpx;height:60rpx"></image>
			</view>
		</u-navbar>
		<view class="z0" :style="{
			height:'200rpx',
			background:'linear-gradient(180deg, #fdf1df, #fffdfa)'
		}"></view>
		<view class="wid100 p-3 box-b" style="margin-top: -200rpx;">
			<u-input placeholder="点击可以进行搜索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				border="surround" shape="circle"
				:customStyle="{backgroundColor:'#fff',boxShadow:'0px 0px 20px 2px rgba(0,0,0,0.03)',marginBottom:'36rpx'}"
				@focus="jump({url:'/pages/search/search'})"></u-input>
			<u-swiper :list="banner" @click="bindBanner" circular :height="150" keyName="image"></u-swiper>
			<view class="mt-4 flex justify-between align-center">
				<view class="position-relative" style="width: 335rpx;height: 190rpx;" @tap="toPushbuy">
					<image class="position-absolute top-0 left-0 " :src="panic_background"
						style="width: 100%;height:100%;"></image>
					<text class="font-32 fwb position-absolute" style="top:40rpx;left:26rpx;">我要抢房</text>
					<text class="font-24 fw4 cl-92 position-absolute" style="top:88rpx;left:26rpx;">为您争取心仪房间</text>
				</view>

				<view class="position-relative" style="width: 335rpx;height: 190rpx;" @tap="toCommunity">
					<image class="position-absolute top-0 left-0 " :src="community_background"
						style="width: 100%;height:100%;"></image>
					<text class="font-32 fwb position-absolute" style="top:40rpx;left:26rpx;">米欧社区</text>
					<text class="font-24 fw4 cl-92 position-absolute" style="top:88rpx;left:26rpx;">拼楼友/新生群</text>
				</view>
			</view>

			<view class="assistance" @click="toShare" :style="{backgroundImage:`url(${help_thumb})`}"
				v-if="open_help == 1">
				<view class="assistance_title">助力礼包</view>
				<view class="assistance_tips">助力解锁超多实用好物</view>
			</view>

			<view class="mt-6">
				<view class="flex justify-between mb-3">
					<text class="font-32 fwb">热门城市</text>
					<picker class="py-1 px-2 box-b" style="background: #F8F8F8;border-radius: 28rpx 28rpx 28rpx 28rpx;"
						@change="bindPickerChange" :value="index" :range="allCity" range-key="title">
						<view class="flex flex-row justify-between align-center">
							<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
							<text class="ml-1 mr-6"
								style="color:#6E6E6E;font-size: 24rpx;">{{allCity[index].title}}</text>
							<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
						</view>
					</picker>
				</view>
				<scroll-view class="mt-3" style="white-space: nowrap;" scroll-x="true">
					<view v-for="(item,index) in hotCityList" :key="index" class="mr-2 d-inline-block position-relative"
						style="width:280rpx;height:150rpx;" @tap="toSearch(item)">
						<image class="position-absolute top-0 z0" :src="item.thumb" style="width:280rpx;height:150rpx;">
						</image>
						<view class="wid100 het100 flex justify-center align-center z1 position-absolute top-0">
							<text class="font-28 cl-ff fwb">/ {{item.name}} /</text>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="mt-6">
				<view class="flex justify-between mb-3">
					<view class="flex align-center">
						<image src="../../static/index/zu909-2x.png" style="width:30rpx;height:30rpx;" mode=""></image>
						<text class="font-32 fwb ml-1">抢房中</text>
					</view>
					<!-- 					<picker class="py-1 px-2 box-b" style="background: #F8F8F8;border-radius: 28rpx 28rpx 28rpx 28rpx;"
						@change="bindPickerChange" :value="index" :range="cityList" range-key="name"> -->
					<!-- <picker class="py-1 px-2 box-b" mode='multiSelector' style="background: #F8F8F8;border-radius: 28rpx 28rpx 28rpx 28rpx;"
						@change="bindPickerChange" :value="index" :range="rangeList" range-key="title">
						<view class="flex flex-row justify-between align-center">
							<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
							<text class="ml-1 mr-6" style="color:#6E6E6E;font-size: 24rpx;">{{city.name}}</text>
							<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
						</view>
					</picker> -->
					<cityP @choiceCity='choiceCity' page="index"></cityP>

				</view>

				<view v-for="(item,index) in apartment" :key="index" class="flex justify-between align-center mb-3"
					@click="jump({url:`/pages/apartmentDetail/apartmentDetail?id=${item.id}`})">
					<image style="width: 280rpx;height: 180rpx;border-radius: 8px;" class="mr-3" :src="item.thumb"
						mode=""></image>
					<view class="flex flex-column flex-1 justify-between" style="height:180rpx;">

						<text class="font-28 fwb cl-1a text-one" style="width: 320rpx;">{{item.title}}</text>
						<view class="flex align-center">
							<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
							<text class="font-24 fw4 cl-aa text-one" style="width: 320rpx;">{{item.address}}</text>
						</view>
						<view class="flex flex-wrap">
							<block v-for="(label,labelIndex) in item.labels">
								<view v-if="labelIndex < 3" :key="labelIndex"
									class="flex align-center py-1 px-1 rounded-10 mr-1 mb-1"
									:style="{backgroundColor:label.color}">
									<text class="font-20" :style="{color:'#fff'}">{{label.title}}</text>
								</view>
							</block>


						</view>
						<view class="flex align-center">
							<text class="font-20 fw5" style="color: #C40E0E;">{{item.currency}}</text>
							<text class="font-28 fw5"
								style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
							<text class="font-20 fw4 cl-88">起 /周</text>
						</view>
					</view>
				</view>

				<view class="mt-6">
					<text class="font-32 fwb">常见问题</text>
					<view class="mt-3 px-2 problem-box" style="background: #F9F9F9;border-radius:8rpx;">
						<view v-for="(item,index) in guides" :key="index" class="box-b " @tap="toProblem(item)">
							<view class="flex-1 flex align-center justify-between">
								<view class="flex align-center " style="padding: 30rpx 0;">
									<image src="../../static/index/lu517-2x.png" style="width:30rpx;height:30rpx;"
										mode=""></image>
									<text class="font-28 fw4 ml-2">{{item.title}}</text>
								</view>
								<u-icon name="arrow-right" color="#6E6E6E" size="11"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<LoginPop></LoginPop>
		<view style="height:200rpx"></view>
	</view>
</template>

<script>
	import cityP from "@/components/city.vue"
	export default {
		components: {
			cityP
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				index: 0,
				banner: [], //轮播
				city: {}, //默认城市
				cityList: [], //城市列表
				hotCityList: [], //热门城市
				guides: [], //问题
				apartment: [], //公寓
				city_id: 0, //城市id
				community_background: '',
				panic_background: '',
				open_help: 0,
				help_thumb: '',
				hotClassification: [],
				allCity: [], //所有城市
				rangeList: [
					[],
					[]
				]
			}
		},
		onLoad() {
			this.city_id = uni.getStorageSync('city').id ? uni.getStorageSync('city').id : 0

			this.getHomData()
		},
		methods: {
			//好友助力
			toShare() {
				if (uni.getStorageSync('userInfo').token) {
					uni.navigateTo({
						url: '/pages/index/share'
					})
				} else {
					this.$store.commit('openPop')
				}
			},
			//热门城市
			toSearch(item) {
				if (item.id == 9527) {
					uni.navigateTo({
						url: '/pages/moreCity/moreCity'
					})
					return
				}
				uni.navigateTo({
					url: `/pages/search/searchDetail?cityData=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			//选择城市
			choiceCity(e) {
				console.log('子组件传参数', e)
				this.city_id = e.id
				uni.setStorageSync('city', e)
				this.getHomData()
			},
			getHomData() {
				this.$H.post(this.$api.getHomeIndex, {
					city_id: this.city_id
				}, {
					token: false
				}).then(res => {
					console.log(res)
					this.banner = res.data.banner
					this.city = res.data.city
					this.cityList = res.data.cityList
					this.guides = res.data.guides
					this.apartment = res.data.apartment
					this.open_help = res.data.open_help
					this.help_thumb = res.data.help_thumb

					this.community_background = res.data.community_background
					this.panic_background = res.data.panic_background

					this.allCity = res.data.country_city
					if (this.index == 0) {
						this.hotCityList = res.data.hoCityList
						this.hotCityList.push({
							english_name: "morecity",
							id: 9527,
							name: "更多城市",
							thumb: "../../static/common/morecity.png"
						})
					}

				})
			},
			bindBanner(e) {
				console.log(e)
				if (this.banner[e].goto_type == 1) {
					//公寓详情
					this.jump({
						url: `/pages/apartmentDetail/apartmentDetail?id=${this.banner[e].goto_id}`
					})
				} else if (this.banner[e].goto_type == 2) {
					//问题详情
					this.jump({
						url: `/pages/index/problem?id=${this.banner[e].goto_id}`
					})
				}
			},
			toCommunity() {
				if (uni.getStorageSync('userInfo').token) {
					this.jump({
						url: '/pages/index/community'
					})
				} else {
					this.$store.commit('openPop')
				}
			},
			toPushbuy() {
				if (uni.getStorageSync('userInfo').token) {
					this.jump({
						url: '/pages/index/pushBuy'
					})
				} else {
					this.$store.commit('openPop')
				}
			},
			//切换城市
			bindPickerChange(e) {
				console.log(e)
				this.index = e.detail.value
				console.log(this.allCity[this.index])
				this.cityDetail(this.allCity[this.index].id)
				// this.city = this.cityList[e.detail.value]
				// this.city_id = this.cityList[e.detail.value].id
				//切换城市
				// this.getHomData()
			},
			cityDetail(id) {

				this.$H.get(`/index/get_hot_cities?country_id=${id}`, {}, {
					token: false
				}).then(res => {
					console.log('热门城市', res)
					this.hotCityList = res.data
					this.hotCityList.push({
						english_name: "morecity",
						id: 9527,
						name: "更多城市",
						thumb: "../../static/common/morecity.png"
					})
				})
			},
			toProblem(item) {
				this.jump({
					url: `/pages/index/problem?id=${item.id}`
				})
			},
			onShareAppMessage(res) {
				return {
					title: '米欧居',
					path: '/pages/index/index'
				}
			},
			//分享到朋友圈
			onShareTimeline(res) {
				return {
					title: '米欧居'
				}
			}
		}
	}
</script>

<style>
	.problem-box>view {
		border-bottom: 1px solid #EEEEEE;
	}

	.problem-box>view:last-child {
		border: none;
	}

	.assistance {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 26rpx;
		margin-top: 24rpx;
		height: 154rpx;
		background-size: 100% 100%;
	}

	.assistance_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}

	.assistance_tips {
		padding-top: 4rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #979797;
	}
</style>